<template>
	<view class="collect-follow">
		<NavBar :right="isSearch" :title="navTitle" @rightTap="search" />
		<!-- <TestVideo/> -->
		<!-- <VideoH video-url="https://www.jiuyuxingou.com/uploads//20250324/6b7d6f1ee3a6545c83d01b00408afa10.mp4" poster="https://www.jiuyuxingou.com/uploads//20250224/2dd52b6191af821f67fe0108fc76933d.jpg"/> -->
		<view class="collect-tracks">
			<!-- 关注店铺 -->
			<view class="shop" v-if="pageType == '3'">
				<ShopItem :shopList="collectShopList" />
			</view>
			<!-- 我的收藏/我的关注 -->
			<view class="content" v-else>
				<view class="goods-item"  v-for="(item, index) in collectGoodsList" :key="item" v-if="collectGoodsList.length" >
					<uni-swipe-action-item :disabled="isDisabled">
						<view class="item">
							<GoodsItem :goodsInfo="item" :isCollect="pageType == '1'?true:false" @cancelCollect="cancelCollect(item, index)"/>
						</view>
						<template v-slot:right>
							<view class="del" @click="delGoods(item.goods.id, index)">
								<image src="/static/icon/mine/del.png" class="d-img"/> 删除
							</view>
						</template>
					</uni-swipe-action-item>
				</view>
				<Empty txt="空空如也~~~" v-else/>
			</view>
		</view>
	</view>
</template>

<script setup>
	// import TestVideo from '../../components/TestVideo.nvue';
	import { computed, ref } from 'vue';
	import { onLoad, onReachBottom } from '@dcloudio/uni-app'
	import Empty from '@/components/Empty.vue';
	import NavBar from '@/components/NavBar.vue';
	import ShopItem from './components/ShopItem.vue';
	import GoodsItem from '@/components/GoodsItem.vue';
	import { GetMyCollectApi, GetMyCollectShopApi, DelMyBrowserApi, GetMyBrowserApi, CollectGoodsApi } from '@/service/index.js'
	import { useAddressStore } from '@/store/index.js'
	const { safeArea } = uni.getSystemInfoSync()
	const isDisabled = ref(true)
	const navTitle = ref('') // navbar title
	const isSearch = ref('search') // 是否显示搜索按钮
	const pageType = ref('1') // 1 我的收藏； 2 我的足迹； 3 关注店铺
	const searchVal = ref('')
	const page = ref(1)
	const pageSize = ref(15)
	const total = ref(0)
	const goBack = () => {
		uni.navigateBack()
	}
	const search = (e) => {
		searchVal.value = e
		page.value = 1
		if(pageType.value==1) {
			collectGoodsList.value = []
			getCollectGoods()
		} else {
			collectShopList.value = []
			getCollectShop()
		}
	}
	// const goDetails = (spu) => {
	// 	uni.navigateTo({
	// 		url: `/pages/productDetails/productDetails?spu=${spu}`
	// 	})
	// }
	// 取消收藏
	const cancelCollect = (goodsInfo, index) => {
		CollectGoodsApi({spu: goodsInfo.spu}).then(res => {
			collectGoodsList.value.splice(index, 1)
		})
	}
	const collectGoodsList = ref([]) // 收藏的商品列表
	const getCollectGoods = () => {  // 获取收藏商品
		let params = {
			page: page.value,
			page_size: pageSize.value,
			filters: {
				search: searchVal.value
			}
		}
		GetMyCollectApi(params).then(res => {
			collectGoodsList.value = res.data
		})
	}
	const getMyBrowser = () => {  // 获取我的足迹
		let params = {
			page: page.value,
			page_size: pageSize.value
		}
		GetMyBrowserApi(params).then(res => {
			collectGoodsList.value = res.data
			
		})
	}
	// 删除我的足迹
	const delGoods = (ids, index) => {
		DelMyBrowserApi({ids}).then(res => {
			collectGoodsList.value.splice(index,1)
		})
	} 
	// 关注的商铺列表
	const collectShopList = ref([])
	// 获取关注店铺
	const getCollectShop = () => {
		const { lonlat } = useAddressStore()
		let params = {
			latitude: lonlat.latitude,
			longitude: lonlat.longitude,
			filters: {
				search: searchVal.value
			}
		}
		GetMyCollectShopApi(params).then(res => {
			collectShopList.value = res.data
		})
	}
	onLoad((e) => {
		const { title } = e
		navTitle.value = title
		switch (title) {
			case '关注店铺':
				pageType.value = '3'
				getCollectShop()
				break;
			case '我的收藏':
				pageType.value = '1'
				getCollectGoods()
				break;
			case '我的足迹':
				pageType.value = '2'
				isSearch.value = ''
				isDisabled.value = false
				getMyBrowser()
				break;
		}
	})
	onReachBottom(() => {
		if(page.value*pageSize.value>=total.value) return
		page.value = page.value + 1
		if(pageType.value == '1') {
			getCollectGoods()
		} else if(pageType.value == '2') {
			getMyBrowser()
		} else {
			getCollectShop()
		}
	})
</script>

<style lang="scss" scoped>
	.video {
		background-color: red;
	}
	.collect-tracks {
		width: 100%;
		padding: 10px 12px;
		box-sizing: border-box;
		.content {
			.goods-item {
				margin-bottom: 10px;
				.item {
					background-color: #fff;
					padding: 14px 12px 10px;
					border-radius: 10px;
				}
				.del {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					padding: 0 16px;
					color: #FF3B1E;
					font-size: 12px;
					font-weight: 400;
					line-height: 17px;
					.d-img {
						width: 28px;
						height: 28px;
						margin-bottom: 2px;
					}
				}
			}
		}
	}

</style>
